<template>
    <n-dropdown trigger="click" style="margin-left: 20px" :options="lstColors" :on-select="onSelect">
        <n-button>
            <div class="square" :style="'background-color:'+_mapColors[color]?.css"></div>
            <n-icon style="margin-left:10px"><AngleDown /></n-icon>
        </n-button>
    </n-dropdown >
</template>

<style scoped>
.square {
    width: 20px ;
    height: 20px ;
    display: inline-block;
    border: 1px solid #ccc;
}
</style>

<script lang="ts" setup>
import { ref, onMounted, onBeforeMount, Ref, reactive, h} from 'vue'
import { useScopeId } from '../../../base/scopedId';
import {AngleDown} from '@vicons/fa'

const scopeId = useScopeId()

function makeColor(key:string, label:string, value: number[]) {
    let css = `rgb(${value.join(',')})`
    let attrs: any = {
        class:['square'] ,
        style: {
            "background-color": css
        }
    }
    attrs[scopeId] = scopeId
    return {
        value ,
        css ,
        label ,
        key ,
        icon: ()=>h('div', attrs)
    }
}
const lstColors: any[] = reactive([])
const _mapColors: any = {}

const props = defineProps<{
    mapColors: {[key:string]: {
        label: string,
        value: number[],
    }} ,
    color: string
}> ()
const emit = defineEmits(['update:color'])

onBeforeMount(()=>{
    lstColors.length = 0
    for(let key in props.mapColors) {
        let opt = props.mapColors[key]
        _mapColors[key] = makeColor(key, opt.label, opt.value)
        lstColors.push(_mapColors[key])
    }
})

function onSelect(color:string) {
    emit('update:color', color)
}

</script>